<template>
  <div class="product-categories">
    <div class="wrapper_1200">
      <!-- 标题 -->
      <div class="section-title">
        <div class="title-container">
          <h2>
            <!-- <el-icon class="title-icon"><Menu /></el-icon> -->
            <font-awesome-icon :icon="['fas', 'leaf']" class="title-icon" />
            产品分类
          </h2>
          <a href="#" class="view-all-link" @click="handleViewAll">查看全部 ></a>
        </div>
      </div>

      <!-- 产品分类卡片 -->
      <div class="categories-grid">
        <div
          v-for="category in categories"
          :key="category.id"
          class="category-card"
          @click="handleCategoryClick(category)"
        >
          <div class="card-image">
            <img :src="category.image" :alt="category.name" />
          </div>
          <div class="card-content">
            <h3 class="category-name">{{ category.name }}</h3>
            <p class="category-desc">{{ category.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Menu } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 导入图片
import mushroomStrainImg from '~/assets/images/mushroom-strain.png'
import shiitakeImg from '~/assets/images/shiitake.png'
import blackFungusImg from '~/assets/images/black-fungus.png'
import otherMushroomsImg from '~/assets/images/other-mushrooms.png'
import processedProductsImg from '~/assets/images/processed-products.png'

// 产品分类数据
const categories = ref([
  {
    id: 1,
    name: '菌种',
    description: '优质菌种、母种、原种',
    image: mushroomStrainImg,
    keyword: '菌种',
  },
  {
    id: 2,
    name: '香菇',
    description: '鲜食、干食、加工品',
    image: shiitakeImg,
    keyword: '香菇',
  },
  {
    id: 3,
    name: '木耳',
    description: '黑木耳、白木耳、木耳制品',
    image: blackFungusImg,
    keyword: '木耳',
  },
  {
    id: 4,
    name: '其他食用菌',
    description: '平菇、金针菇、猴头菇',
    image: otherMushroomsImg,
    keyword: '食用菌',
  },
  {
    id: 5,
    name: '深加工产品',
    description: '菌菇酱、速食汤、调味品',
    image: processedProductsImg,
    keyword: '深加工',
  },
])

// 处理分类点击 - 使用与顶部搜索按钮相同的逻辑
const handleCategoryClick = async (category: any) => {
  try {
    // 跳转到商品列表页面，传递搜索关键词
    await navigateTo({
      path: '/product/product_list',
      query: {
        searchValue: category.keyword,
      },
    })

    // ElMessage.success(`正在查看${category.name}相关商品`)
  } catch (error) {
    console.error('跳转失败:', error)
    ElMessage.error('跳转失败，请稍后重试')
  }
}

// 处理查看全部点击
const handleViewAll = () => {
  //   navigateTo('/market/home')
}
</script>

<style scoped lang="scss">
.wrapper_1200{
    width: 1400px;
    padding: 0 20px;
}
.product-categories {
  padding: 20px 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  .section-title {
    margin-bottom: 30px;

    .title-container {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h2 {
        font-size: 20px;
        font-weight: 700;
        color: #333;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        .title-icon {
          font-size: 20px;
          color: #e93323;
        }
        &:after{
            background: #e4393c;
            bottom: -8px;
            content: "";
            height: 3px;
            left: 0;
            position: absolute;
            width: 100%;
        }
      }

      .view-all-link {
        color: #666;
        text-decoration: none;
        font-size: 14px;
        transition: color 0.3s ease;

        &:hover {
          color: #e93323;
        }
      }
    }
  }

  .categories-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 30px;

    .category-card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s ease;
      height: 248px;
      background-color: #fff;
      box-shadow: 0 2px 8px #0000001a;
      &:hover {
        box-shadow: 0 6px 20px #00000026;
        transform: translateY(-4px);
        .card-content .category-name {
          color: #e93323;
        }
      }

      .card-image {
        position: relative;
        width: 100%;
        height: 60%;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .image-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.4) 70%,
            rgba(0, 0, 0, 0.7) 100%
          );
        }
      }

      .card-content {
        padding: 15px;
        .category-name {
          font-size: 16px;
          font-weight: 700;
          margin: 0 0 8px 0;
          color: #333;
        }

        .category-desc {
          font-size: 12px;
          margin: 0;
          opacity: 0.9;
          line-height: 1.4;
          color: #666;
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 1200px) {
    .categories-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
  }

  @media (max-width: 768px) {
    .categories-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;

      .category-card {
        height: 160px;

        .card-content {
          padding: 15px;

          .category-name {
            font-size: 16px;
          }

          .category-desc {
            font-size: 12px;
          }
        }
      }
    }

    .section-title {
      h2 {
        font-size: 24px;
      }
    }
  }

  @media (max-width: 480px) {
    .categories-grid {
      grid-template-columns: 1fr;
      gap: 10px;

      .category-card {
        height: 140px;
      }
    }
  }
}
</style>
